React Fiber์ ์ฐ์ ์์ ๋ ์ธ ๊ด๋ฆฌ๋ฅผ ๋ง์คํฐํ์ฌ ์ ๋์ ์ธ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌํํ์ธ์. ๋์์ฑ ๋ ๋๋ง, ์ค์ผ์ค๋ฌ, startTransition๊ณผ ๊ฐ์ ์๋ก์ด API์ ๋ํ ํฌ๊ด์ ์ธ ๊ฐ์ด๋์ ๋๋ค.
React Fiber ์ฐ์ ์์ ๋ ์ธ ๊ด๋ฆฌ: ๋ ๋๋ง ์ ์ด ์ฌ์ธต ๋ถ์
์น ๊ฐ๋ฐ์ ์ธ๊ณ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ์๊ฐ์ ์ธ ๋ฉ์ถค, ๋ฒ๋ฒ ์ด๋ ์ ๋๋ฉ์ด์ , ๋๋ ๋๋ฆฐ ์ ๋ ฅ ํ๋๋ ๋ง์กฑํ ์ฌ์ฉ์์ ๋ถ๋ง์ค๋ฌ์ด ์ฌ์ฉ์๋ฅผ ๊ฐ๋ฅด๋ ์ฐจ์ด๊ฐ ๋ ์ ์์ต๋๋ค. ์๋ ๊ฐ ๊ฐ๋ฐ์๋ค์ ์ ๋์ ์ด๊ณ ๋ฐ์์ฑ์ด ๋ฐ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค๊ธฐ ์ํด ๋ธ๋ผ์ฐ์ ์ ๋จ์ผ ์ค๋ ๋ ํน์ฑ๊ณผ ์ธ์์์ต๋๋ค. React 16์์ Fiber ์ํคํ ์ฒ๊ฐ ๋์ ๋๊ณ React 18์์ ๋์์ฑ ๊ธฐ๋ฅ์ผ๋ก ์์ ํ ๊ตฌํ๋๋ฉด์, ๊ฒ์์ ํ๋๊ฐ ๊ทผ๋ณธ์ ์ผ๋ก ๋ฐ๋์์ต๋๋ค. React๋ ๋จ์ํ UI๋ฅผ ๋ ๋๋งํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ UI ์ ๋ฐ์ดํธ๋ฅผ ์ง๋ฅ์ ์ผ๋ก ์ค์ผ์ค๋งํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์งํํ์ต๋๋ค.
์ด ์ฌ์ธต ๋ถ์์์๋ ์ด๋ฌํ ์งํ์ ํต์ฌ์ธ React Fiber์ ์ฐ์ ์์ ๋ ์ธ ๊ด๋ฆฌ๋ฅผ ํ๊ตฌํฉ๋๋ค. React๊ฐ ๋ฌด์์ ์ง๊ธ ๋ ๋๋งํ๊ณ , ๋ฌด์์ ๊ธฐ๋ค๋ฆด ์ ์๋์ง, ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ฉ์ถ์ง ์์ผ๋ฉด์ ์ฌ๋ฌ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ๋์ง ๋ช ํํ ์ค๋ช ํ ๊ฒ์ ๋๋ค. ์ด๊ฒ์ ๋จ์ํ ํ๋ฌธ์ ์ธ ํ๊ตฌ๊ฐ ์๋๋๋ค. ์ด๋ฌํ ํต์ฌ ์์น์ ์ดํดํ๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ๋ ๋น ๋ฅด๊ณ , ๋ ๋๋ํ๋ฉฐ, ๋ ํ๋ ฅ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์๋ ํ์ ์ป๊ฒ ๋ฉ๋๋ค.
์คํ ์ฌ์กฐ์ ์์์ Fiber๋ก: ๋ฆฌ๋ผ์ดํธ์ ์ด์
Fiber์ ํ์ ์ ์ ๋๋ก ์ดํดํ๋ ค๋ฉด, ๋จผ์ ๊ทธ ์ด์ ๋ฒ์ ์ธ ์คํ ์ฌ์กฐ์ ์(Stack Reconciler)์ ํ๊ณ๋ฅผ ์์์ผ ํฉ๋๋ค. React 16 ์ด์ ์๋ ์ฌ์กฐ์ ๊ณผ์ โReact๊ฐ ํ ํธ๋ฆฌ์ ๋ค๋ฅธ ํธ๋ฆฌ๋ฅผ ๋น๊ตํ์ฌ DOM์์ ๋ฌด์์ ๋ณ๊ฒฝํด์ผ ํ ์ง ๊ฒฐ์ ํ๋ ์๊ณ ๋ฆฌ์ฆโ์ด ๋๊ธฐ์ ์ด๊ณ ์ฌ๊ท์ ์ด์์ต๋๋ค. ์ปดํฌ๋ํธ์ ์ํ๊ฐ ์ ๋ฐ์ดํธ๋๋ฉด, React๋ ์ ์ฒด ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ์ํํ๊ณ , ๋ณ๊ฒฝ ์ฌํญ์ ๊ณ์ฐํ ๋ค์, ์ค๋จ ์๋ ๋จ์ผ ์ํ์ค๋ก DOM์ ์ ์ฉํ์ต๋๋ค.
์์ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์ด๊ฒ์ผ๋ก ์ถฉ๋ถํ์ต๋๋ค. ํ์ง๋ง ๊น์ ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ๊ฐ์ง ๋ณต์กํ UI์ ๊ฒฝ์ฐ, ์ด ๊ณผ์ ์ ์๋นํ ์๊ฐโ์๋ฅผ ๋ค์ด 16๋ฐ๋ฆฌ์ด ์ด์โ์ด ๊ฑธ๋ฆด ์ ์์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋จ์ผ ์ค๋ ๋์ด๊ธฐ ๋๋ฌธ์, ์ค๋ ์คํ๋๋ ์ฌ์กฐ์ ์์ ์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ์ต๋๋ค. ์ด๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ค์๊ณผ ๊ฐ์ ๋ค๋ฅธ ์ค์ํ ์์ ์ ์ฒ๋ฆฌํ ์ ์๋ค๋ ๊ฒ์ ์๋ฏธํ์ต๋๋ค:
- ์ฌ์ฉ์ ์ ๋ ฅ(ํ์ดํ์ด๋ ํด๋ฆญ ๋ฑ)์ ์๋ตํ๊ธฐ.
- ์ ๋๋ฉ์ด์ (CSS ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ) ์คํํ๊ธฐ.
- ๊ธฐํ ์๊ฐ์ ๋ฏผ๊ฐํ ๋ก์ง ์คํํ๊ธฐ.
๊ทธ ๊ฒฐ๊ณผ๋ "์ํฌ(jank)"๋ผ๊ณ ์๋ ค์ง ํ์โ๋ฒ๋ฒ ์ด๊ณ ๋ฐ์ ์๋ ์ฌ์ฉ์ ๊ฒฝํโ์ด์์ต๋๋ค. ์คํ ์ฌ์กฐ์ ์๋ ๋จ์ ์ฒ ๋์ฒ๋ผ ์๋ํ์ต๋๋ค: ์ผ๋จ ๊ธฐ์ฐจ(๋ ๋ ์ ๋ฐ์ดํธ)๊ฐ ์ดํ์ ์์ํ๋ฉด, ๋๊น์ง ๋ฌ๋ ค์ผ ํ๊ณ ๋ค๋ฅธ ๊ธฐ์ฐจ๋ ์ ๋ก๋ฅผ ์ฌ์ฉํ ์ ์์์ต๋๋ค. ์ด๋ฌํ ์ฐจ๋จ(blocking) ํน์ฑ์ด React์ ํต์ฌ ์๊ณ ๋ฆฌ์ฆ์ ์์ ํ ์๋ก ์์ฑํ๊ฒ ๋ ์ฃผ๋ ๋๊ธฐ์์ต๋๋ค.
React Fiber์ ํต์ฌ ์์ด๋์ด๋ ์ฌ์กฐ์ ์ ๋ ์์ ์์ ๋จ์๋ก ๋๋ ์ ์๋ ๊ฒ์ผ๋ก ์ฌ๊ตฌ์ฑํ๋ ๊ฒ์ด์์ต๋๋ค. ๋จ์ผํ๊ณ ๊ฑฐ๋ํ ์์ ๋์ , ๋ ๋๋ง์ ์ผ์ ์ค์งํ๊ณ , ์ฌ๊ฐํ๋ฉฐ, ์ฌ์ง์ด ์ค๋จํ ์๋ ์๊ฒ ๋์์ต๋๋ค. ์ด๋ฌํ ๋๊ธฐ์์์ ๋น๋๊ธฐ์, ์ค์ผ์ค๋ง ๊ฐ๋ฅํ ํ๋ก์ธ์ค๋ก์ ์ ํ์ ํตํด React๋ ๋ธ๋ผ์ฐ์ ์ ๋ฉ์ธ ์ค๋ ๋์ ์ ์ด๊ถ์ ๋๋ ค์ฃผ์ด ์ฌ์ฉ์ ์ ๋ ฅ๊ณผ ๊ฐ์ ๋์ ์ฐ์ ์์์ ์์ ์ด ์ ๋ ์ฐจ๋จ๋์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค. Fiber๋ ๋จ์ ์ฒ ๋๋ฅผ ์ฐ์ ์์๊ฐ ๋์ ํธ๋ํฝ์ ์ํ ๊ธํ ์ฐจ์ ์ด ์๋ ๋ค์ฐจ์ ๊ณ ์๋๋ก๋ก ๋ณ๋ชจ์์ผฐ์ต๋๋ค.
'Fiber'๋ ๋ฌด์์ธ๊ฐ? ๋์์ฑ์ ๊ตฌ์ฑ ์์
ํต์ฌ์ ์ผ๋ก, "ํ์ด๋ฒ(fiber)"๋ ์์ ๋จ์๋ฅผ ๋ํ๋ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ๋๋ค. ์ฌ๊ธฐ์๋ ์ปดํฌ๋ํธ, ๊ทธ ์ ๋ ฅ(props), ๊ทธ๋ฆฌ๊ณ ๊ทธ ์ถ๋ ฅ(children)์ ๋ํ ์ ๋ณด๊ฐ ํฌํจ๋ฉ๋๋ค. ํ์ด๋ฒ๋ฅผ ๊ฐ์ ์คํ ํ๋ ์์ด๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค. ์ด์ ์ ์คํ ์ฌ์กฐ์ ์์์๋ ๋ธ๋ผ์ฐ์ ์ ํธ์ถ ์คํ์ ์ฌ์ฉํ์ฌ ์ฌ๊ท์ ์ธ ํธ๋ฆฌ ์ํ๋ฅผ ๊ด๋ฆฌํ์ต๋๋ค. Fiber๋ฅผ ํตํด React๋ ํ์ด๋ฒ ๋ ธ๋์ ์ฐ๊ฒฐ ๋ฆฌ์คํธ๋ก ํํ๋๋ ์์ฒด ๊ฐ์ ์คํ์ ๊ตฌํํฉ๋๋ค. ์ด๋ React์๊ฒ ๋ ๋๋ง ๊ณผ์ ์ ์๋ฒฝํ๊ฒ ์ ์ดํ ์ ์๋ ๋ฅ๋ ฅ์ ๋ถ์ฌํฉ๋๋ค.
์ปดํฌ๋ํธ ํธ๋ฆฌ์ ๋ชจ๋ ์์์๋ ํด๋นํ๋ ํ์ด๋ฒ ๋ ธ๋๊ฐ ์์ต๋๋ค. ์ด ๋ ธ๋๋ค์ ์๋ก ์ฐ๊ฒฐ๋์ด ์ปดํฌ๋ํธ ํธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๋ฏธ๋ฌ๋งํ๋ ํ์ด๋ฒ ํธ๋ฆฌ๋ฅผ ํ์ฑํฉ๋๋ค. ํ์ด๋ฒ ๋ ธ๋๋ ๋ค์๊ณผ ๊ฐ์ ์ค์ํ ์ ๋ณด๋ฅผ ๋ด๊ณ ์์ต๋๋ค:
- type and key: React ์๋ฆฌ๋จผํธ์์ ๋ณผ ์ ์๋ ๊ฒ๊ณผ ์ ์ฌํ ์ปดํฌ๋ํธ ์๋ณ์.
- child: ์ฒซ ๋ฒ์งธ ์์ ํ์ด๋ฒ๋ฅผ ๊ฐ๋ฆฌํค๋ ํฌ์ธํฐ.
- sibling: ๋ค์ ํ์ ํ์ด๋ฒ๋ฅผ ๊ฐ๋ฆฌํค๋ ํฌ์ธํฐ.
- return: ๋ถ๋ชจ ํ์ด๋ฒ๋ฅผ ๊ฐ๋ฆฌํค๋ ํฌ์ธํฐ (์์ ์๋ฃ ํ '๋ณต๊ท' ๊ฒฝ๋ก).
- pendingProps and memoizedProps: ์ด์ ๋ ๋์ ๋ค์ ๋ ๋์ props๋ก, ๋น๊ต(diffing)์ ์ฌ์ฉ๋จ.
- stateNode: ์ค์ DOM ๋ ธ๋, ํด๋์ค ์ธ์คํด์ค ๋๋ ๊ธฐ๋ณธ ํ๋ซํผ ์๋ฆฌ๋จผํธ์ ๋ํ ์ฐธ์กฐ.
- effectTag: ์ํํด์ผ ํ ์์ (์: Placement, Update, Deletion)์ ์ค๋ช ํ๋ ๋นํธ๋ง์คํฌ.
์ด ๊ตฌ์กฐ๋ฅผ ํตํด React๋ ๋ค์ดํฐ๋ธ ์ฌ๊ท์ ์์กดํ์ง ์๊ณ ํธ๋ฆฌ๋ฅผ ์ํํ ์ ์์ต๋๋ค. ํ ํ์ด๋ฒ์์ ์์ ์ ์์ํ๊ณ , ์ผ์ ์ค์งํ ๋ค์, ๋์ค์ ์์น๋ฅผ ์์ง ์๊ณ ์ฌ๊ฐํ ์ ์์ต๋๋ค. ์์ ์ ์ผ์ ์ค์งํ๊ณ ์ฌ๊ฐํ ์ ์๋ ์ด ๋ฅ๋ ฅ์ React์ ๋ชจ๋ ๋์์ฑ ๊ธฐ๋ฅ์ ๊ฐ๋ฅํ๊ฒ ํ๋ ๊ธฐ๋ณธ ๋ฉ์ปค๋์ฆ์ ๋๋ค.
์์คํ ์ ํต์ฌ: ์ค์ผ์ค๋ฌ์ ์ฐ์ ์์ ๋ ๋ฒจ
ํ์ด๋ฒ๊ฐ ์์ ๋จ์๋ผ๋ฉด, ์ค์ผ์ค๋ฌ๋ ์ด๋ค ์์ ์ ์ธ์ ํ ์ง ๊ฒฐ์ ํ๋ ๋๋์ ๋๋ค. React๋ ์ํ ๋ณ๊ฒฝ ์ ์ฆ์ ๋ ๋๋ง์ ์์ํ์ง ์์ต๋๋ค. ๋์ , ์ ๋ฐ์ดํธ์ ์ฐ์ ์์ ๋ ๋ฒจ์ ํ ๋นํ๊ณ ์ค์ผ์ค๋ฌ์๊ฒ ์ฒ๋ฆฌ๋ฅผ ์์ฒญํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ์ค์ผ์ค๋ฌ๋ ๋ธ๋ผ์ฐ์ ์ ํ๋ ฅํ์ฌ ์์ ์ ์ํํ ์ต์ ์ ์๊ฐ์ ์ฐพ์ ๋ ์ค์ํ ์์ ์ ์ฐจ๋จํ์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ด๊ธฐ์ ์ด ์์คํ ์ ๋ช ๊ฐ์ง ๊ฐ๋ณ์ ์ธ ์ฐ์ ์์ ๋ ๋ฒจ์ ์ฌ์ฉํ์ต๋๋ค. ํ๋์ ์ธ ๊ตฌํ(๋ ์ธ ๋ชจ๋ธ)์ ๋ ๋ฏธ๋ฌํ์ง๋ง, ์ด๋ฌํ ๊ฐ๋ ์ ๋ ๋ฒจ์ ์ดํดํ๋ ๊ฒ์ ์ข์ ์ถ๋ฐ์ ์ ๋๋ค:
- ImmediatePriority: ์ฆ์ ๋ฐ์ํด์ผ ํ๋ ๋๊ธฐ์ ์ ๋ฐ์ดํธ๋ฅผ ์ํด ์์ฝ๋ ๊ฐ์ฅ ๋์ ์ฐ์ ์์์ ๋๋ค. ๋ํ์ ์ธ ์๋ ์ ์ด๋๋ ์ ๋ ฅ(controlled input)์ ๋๋ค. ์ฌ์ฉ์๊ฐ ์ ๋ ฅ ํ๋์ ํ์ดํํ ๋ UI๋ ์ฆ์ ๊ทธ ๋ณํ๋ฅผ ๋ฐ์ํด์ผ ํฉ๋๋ค. ๋ช ๋ฐ๋ฆฌ์ด๋ผ๋ ์ง์ฐ๋๋ค๋ฉด ์ ๋ ฅ์ด ๋๋ฆฌ๊ฒ ๋๊ปด์ง ๊ฒ์ ๋๋ค.
- UserBlockingPriority: ๋ฒํผ ํด๋ฆญ์ด๋ ํ๋ฉด ํญ๊ณผ ๊ฐ์ ๊ฐ๋ณ์ ์ธ ์ฌ์ฉ์ ์ํธ์์ฉ์ผ๋ก ์ธํ ์ ๋ฐ์ดํธ๋ฅผ ์ํ ๊ฒ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ์ฆ๊ฐ์ ์ผ๋ก ๋๊ปด์ ธ์ผ ํ์ง๋ง, ํ์ํ ๊ฒฝ์ฐ ๋งค์ฐ ์งง์ ๊ธฐ๊ฐ ๋์ ์ง์ฐ๋ ์ ์์ต๋๋ค. ๋๋ถ๋ถ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ ์ด ์ฐ์ ์์๋ก ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
- NormalPriority: ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ(`useEffect`)๋ ๋ด๋น๊ฒ์ด์ ์์ ๋ฐ์ํ๋ ๊ฒ๊ณผ ๊ฐ์ ๋๋ถ๋ถ์ ์ ๋ฐ์ดํธ์ ๋ํ ๊ธฐ๋ณธ ์ฐ์ ์์์ ๋๋ค. ์ด๋ฌํ ์ ๋ฐ์ดํธ๋ ์ฆ๊ฐ์ ์ผ ํ์๊ฐ ์์ผ๋ฉฐ, React๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ฐฉํดํ์ง ์๋๋ก ์ค์ผ์ค๋งํ ์ ์์ต๋๋ค.
- LowPriority: ํ๋ฉด ๋ฐ ์ฝํ ์ธ ๋ ๋๋ง์ด๋ ๋ถ์ ์ด๋ฒคํธ์ ๊ฐ์ด ์๊ฐ์ ๋ฏผ๊ฐํ์ง ์์ ์ ๋ฐ์ดํธ๋ฅผ ์ํ ๊ฒ์ ๋๋ค.
- IdlePriority: ๊ฐ์ฅ ๋ฎ์ ์ฐ์ ์์๋ก, ๋ธ๋ผ์ฐ์ ๊ฐ ์์ ํ ์ ํด ์ํ์ผ ๋๋ง ์ํํ ์ ์๋ ์์ ์ ์ํ ๊ฒ์ ๋๋ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ฝ๋์์ ์ง์ ๊ฑฐ์ ์ฌ์ฉ๋์ง ์์ง๋ง, ๋ก๊น ์ด๋ ๋ฏธ๋ ์์ ์ ์ฌ์ ๊ณ์ฐ๊ณผ ๊ฐ์ ๋ด๋ถ์ ์ธ ์ฉ๋๋ก ์ฌ์ฉ๋ฉ๋๋ค.
React๋ ์ ๋ฐ์ดํธ์ ์ปจํ ์คํธ์ ๋ฐ๋ผ ์ฌ๋ฐ๋ฅธ ์ฐ์ ์์๋ฅผ ์๋์ผ๋ก ํ ๋นํฉ๋๋ค. ์๋ฅผ ๋ค์ด, `click` ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด์ ์ ๋ฐ์ดํธ๋ `UserBlockingPriority`๋ก ์ค์ผ์ค๋ง๋๋ ๋ฐ๋ฉด, `useEffect` ๋ด์ ์ ๋ฐ์ดํธ๋ ์ผ๋ฐ์ ์ผ๋ก `NormalPriority`์ ๋๋ค. ์ด๋ฌํ ์ง๋ฅ์ ์ด๊ณ ์ปจํ ์คํธ๋ฅผ ์ธ์ํ๋ ์ฐ์ ์์ ์ง์ ๋๋ถ์ React๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋น ๋ฅด๊ฒ ๋๊ปด์ง๋๋ค.
๋ ์ธ ์ด๋ก : ํ๋์ ์ธ ์ฐ์ ์์ ๋ชจ๋ธ
React์ ๋์์ฑ ๊ธฐ๋ฅ์ด ๋์ฑ ์ ๊ตํด์ง๋ฉด์, ๊ฐ๋จํ ์ซ์ ์ฐ์ ์์ ์์คํ ์ ๋ถ์ถฉ๋ถํ๋ค๋ ๊ฒ์ด ์ฆ๋ช ๋์์ต๋๋ค. ๋ค๋ฅธ ์ฐ์ ์์๋ฅผ ๊ฐ์ง ์ฌ๋ฌ ์ ๋ฐ์ดํธ, ์ค๋จ, ๋ฐฐ์น(batching)์ ๊ฐ์ ๋ณต์กํ ์๋๋ฆฌ์ค๋ฅผ ์ํํ๊ฒ ์ฒ๋ฆฌํ ์ ์์์ต๋๋ค. ์ด๋ก ์ธํด **๋ ์ธ(Lane) ๋ชจ๋ธ**์ด ๊ฐ๋ฐ๋์์ต๋๋ค.
๋จ์ผ ์ฐ์ ์์ ์ซ์ ๋์ , 31๊ฐ์ "๋ ์ธ" ์งํฉ์ ์๊ฐํด๋ณด์ธ์. ๊ฐ ๋ ์ธ์ ๋ค๋ฅธ ์ฐ์ ์์๋ฅผ ๋ํ๋ ๋๋ค. ์ด๊ฒ์ ๋นํธ๋ง์คํฌโ๊ฐ ๋นํธ๊ฐ ๋ ์ธ์ ํด๋นํ๋ 31๋นํธ ์ ์โ๋ก ๊ตฌํ๋ฉ๋๋ค. ์ด ๋นํธ๋ง์คํฌ ์ ๊ทผ ๋ฐฉ์์ ๋งค์ฐ ํจ์จ์ ์ด๋ฉฐ ๊ฐ๋ ฅํ ์ฐ์ฐ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค:
- ์ฌ๋ฌ ์ฐ์ ์์ ํํ: ๋จ์ผ ๋นํธ๋ง์คํฌ๋ ๋ณด๋ฅ ์ค์ธ ์ฐ์ ์์ ์งํฉ์ ๋ํ๋ผ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ปดํฌ๋ํธ์ `UserBlocking` ์ ๋ฐ์ดํธ์ `Normal` ์ ๋ฐ์ดํธ๊ฐ ๋ชจ๋ ๋ณด๋ฅ ์ค์ด๋ผ๋ฉด, ๊ทธ ์ปดํฌ๋ํธ์ `lanes` ์์ฑ์ ๋ ์ฐ์ ์์์ ํด๋นํ๋ ๋นํธ๊ฐ ๋ชจ๋ 1๋ก ์ค์ ๋ฉ๋๋ค.
- ์ค๋ณต ํ์ธ: ๋นํธ ์ฐ์ฐ์ ์ฌ์ฉํ๋ฉด ๋ ๋ ์ธ ์งํฉ์ด ๊ฒน์น๋์ง ๋๋ ํ ์งํฉ์ด ๋ค๋ฅธ ์งํฉ์ ํ์ ์งํฉ์ธ์ง ์ฝ๊ฒ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ ๋ค์ด์ค๋ ์ ๋ฐ์ดํธ๋ฅผ ๊ธฐ์กด ์์ ๊ณผ ํจ๊ป ๋ฐฐ์นํ ์ ์๋์ง ๊ฒฐ์ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ์์ ์ฐ์ ์์ ์ง์ : React๋ ๋ณด๋ฅ ์ค์ธ ๋ ์ธ ์งํฉ์์ ๊ฐ์ฅ ๋์ ์ฐ์ ์์์ ๋ ์ธ์ ์ ์ํ๊ฒ ์๋ณํ๊ณ ํด๋น ์์ ์๋ง ์ง์คํ๋๋ก ์ ํํ ์ ์์ผ๋ฉฐ, ๋ฎ์ ์ฐ์ ์์์ ์์ ์ ์ผ๋จ ๋ฌด์ํฉ๋๋ค.
31๊ฐ์ ๋ ์ธ์ด ์๋ ์์์ฅ์ ๋น์ ํ ์ ์์ต๋๋ค. ๊ฒฝ์ ์์ ์ ์์ ๊ฐ์ ๊ธด๊ธํ ์ ๋ฐ์ดํธ๋ ๋์ ์ฐ์ ์์์ ๋ ์ธ์ ์ป์ด ์ค๋จ ์์ด ์งํํ ์ ์์ต๋๋ค. ์ผ๋ฐ ์์๊ฐ๊ณผ ๊ฐ์ ์ฌ๋ฌ ๊ฐ์ ๊ธด๊ธํ์ง ์์ ์ ๋ฐ์ดํธ๋ ๋ฎ์ ์ฐ์ ์์์ ๋ ์ธ์ ํจ๊ป ๋ฐฐ์น๋ ์ ์์ต๋๋ค. ๋ง์ฝ ๊ฒฝ์ ์์ ์ ์๊ฐ ๊ฐ์๊ธฐ ๋์ฐฉํ๋ฉด, ์ธ๋ช ๊ตฌ์กฐ์(์ค์ผ์ค๋ฌ)์ ์ฐ์ ์์ ์์ ์ ์๊ฐ ์ง๋๊ฐ๋๋ก ์ผ๋ฐ ์์๊ฐ๋ค์ ์ ์ ๋ฉ์ถ ์ ์์ต๋๋ค. ๋ ์ธ ๋ชจ๋ธ์ React์๊ฒ ์ด ๋ณต์กํ ์กฐ์ ์ ๊ด๋ฆฌํ ์ ์๋ ๋งค์ฐ ์ธ๋ถํ๋๊ณ ์ ์ฐํ ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
2๋จ๊ณ ์ฌ์กฐ์ ํ๋ก์ธ์ค
React Fiber์ ๋ง๋ฒ์ 2๋จ๊ณ ์ปค๋ฐ ์ํคํ ์ฒ๋ฅผ ํตํด ์คํ๋ฉ๋๋ค. ์ด ๋ถ๋ฆฌ ๋๋ถ์ ๋ ๋๋ง์ด ์๊ฐ์ ๋ถ์ผ์น๋ฅผ ์ ๋ฐํ์ง ์์ผ๋ฉด์ ์ค๋จ ๊ฐ๋ฅํ๊ฒ ๋ฉ๋๋ค.
1๋จ๊ณ: ๋ ๋/์ฌ์กฐ์ ๋จ๊ณ (๋น๋๊ธฐ ๋ฐ ์ค๋จ ๊ฐ๋ฅ)
์ด ๋จ๊ณ์์ React๋ ํ๋ ์์ ์ ์ํํฉ๋๋ค. ์ปดํฌ๋ํธ ํธ๋ฆฌ์ ๋ฃจํธ์์ ์์ํ์ฌ, React๋ `workLoop` ์์์ ํ์ด๋ฒ ๋ ธ๋๋ฅผ ์ํํฉ๋๋ค. ๊ฐ ํ์ด๋ฒ์ ๋ํด ์ ๋ฐ์ดํธ๊ฐ ํ์ํ์ง ๊ฒฐ์ ํฉ๋๋ค. ์ปดํฌ๋ํธ๋ฅผ ํธ์ถํ๊ณ , ์๋ก์ด ์๋ฆฌ๋จผํธ์ ์ด์ ํ์ด๋ฒ๋ฅผ ๋น๊ตํ๋ฉฐ, ๋ถ์ ํจ๊ณผ(side effects) ๋ชฉ๋ก(์: "์ด DOM ๋ ธ๋ ์ถ๊ฐ", "์ด ์์ฑ ์ ๋ฐ์ดํธ", "์ด ์ปดํฌ๋ํธ ์ ๊ฑฐ")์ ๋ง๋ญ๋๋ค.
์ด ๋จ๊ณ์ ๊ฒฐ์ ์ ์ธ ํน์ง์ ๋น๋๊ธฐ์ ์ด๋ฉฐ ์ค๋จ๋ ์ ์๋ค๋ ๊ฒ์ ๋๋ค. ๋ช ๊ฐ์ ํ์ด๋ฒ๋ฅผ ์ฒ๋ฆฌํ ํ, React๋ `shouldYield`๋ผ๋ ๋ด๋ถ ํจ์๋ฅผ ํตํด ํ ๋น๋ ์๊ฐ ์กฐ๊ฐ(๋ณดํต ๋ช ๋ฐ๋ฆฌ์ด)์ ๋ค ์ผ๋์ง ํ์ธํฉ๋๋ค. ๋ง์ฝ ๋ ๋์ ์ฐ์ ์์์ ์ด๋ฒคํธ(์ฌ์ฉ์ ์ ๋ ฅ ๋ฑ)๊ฐ ๋ฐ์ํ๊ฑฐ๋ ์๊ฐ์ด ๋ค ๋์๋ค๋ฉด, React๋ ์์ ์ ์ผ์ ์ค์งํ๊ณ , ํ์ด๋ฒ ํธ๋ฆฌ์ ์งํ ์ํฉ์ ์ ์ฅํ ๋ค์, ๋ธ๋ผ์ฐ์ ์ ๋ฉ์ธ ์ค๋ ๋์ ์ ์ด๊ถ์ ๋๊ฒจ์ค๋๋ค. ๋ธ๋ผ์ฐ์ ๊ฐ ๋ค์ ์ฌ์ ๋ก์์ง๋ฉด, React๋ ์ค๋จํ๋ ์ง์ ๋ถํฐ ๋ฐ๋ก ๋ค์ ์์ํ ์ ์์ต๋๋ค.
์ด ์ ์ฒด ๋จ๊ณ ๋์, ์ด๋ค ๋ณ๊ฒฝ ์ฌํญ๋ DOM์ ๋ฐ์๋์ง ์์ต๋๋ค. ์ฌ์ฉ์๋ ์ด์ ์ ์ผ๊ด๋ UI๋ฅผ ๋ด ๋๋ค. ์ด๋ ๋งค์ฐ ์ค์ํฉ๋๋คโ๋ง์ฝ React๊ฐ ๋ณ๊ฒฝ ์ฌํญ์ ์ ์ง์ ์ผ๋ก ์ ์ฉํ๋ค๋ฉด, ์ฌ์ฉ์๋ ๊นจ์ง๊ณ ๋ฐ์ฏค ๋ ๋๋ง๋ ์ธํฐํ์ด์ค๋ฅผ ๋ณด๊ฒ ๋ ๊ฒ์ ๋๋ค. ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฉ๋ชจ๋ฆฌ์์ ๊ณ์ฐ๋๊ณ ์์ง๋์ด ์ปค๋ฐ ๋จ๊ณ๋ฅผ ๊ธฐ๋ค๋ฆฝ๋๋ค.
2๋จ๊ณ: ์ปค๋ฐ ๋จ๊ณ (๋๊ธฐ ๋ฐ ์ค๋จ ๋ถ๊ฐ๋ฅ)
๋ ๋ ๋จ๊ณ๊ฐ ์ ์ฒด ์ ๋ฐ์ดํธ๋ ํธ๋ฆฌ์ ๋ํด ์ค๋จ ์์ด ์๋ฃ๋๋ฉด, React๋ ์ปค๋ฐ ๋จ๊ณ๋ก ์ด๋ํฉ๋๋ค. ์ด ๋จ๊ณ์์๋ ์์งํ ๋ถ์ ํจ๊ณผ ๋ชฉ๋ก์ ๊ฐ์ ธ์ DOM์ ์ ์ฉํฉ๋๋ค.
์ด ๋จ๊ณ๋ ๋๊ธฐ์ ์ด๋ฉฐ ์ค๋จ๋ ์ ์์ต๋๋ค. DOM์ด ์์์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋๋ก ๋ณด์ฅํ๊ธฐ ์ํด ๋จ์ผํ๊ณ ๋น ๋ฅธ ํ ๋ฒ์ ์์ ์ผ๋ก ์คํ๋์ด์ผ ํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ์ผ๊ด์ฑ ์๊ฑฐ๋ ๋ถ๋ถ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋ UI๋ฅผ ๋ณด๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ์ด ๋จ๊ณ๋ React๊ฐ `componentDidMount` ๋ฐ `componentDidUpdate`์ ๊ฐ์ ์๋ช ์ฃผ๊ธฐ ๋ฉ์๋์ `useLayoutEffect` ํ ์ ์คํํ๋ ์์ ์ด๊ธฐ๋ ํฉ๋๋ค. ๋๊ธฐ์ ์ด๊ธฐ ๋๋ฌธ์, ํ์ธํ ์ ์ฐจ๋จํ ์ ์๋ `useLayoutEffect` ๋ด์์ ์ค๋ ์คํ๋๋ ์ฝ๋๋ ํผํด์ผ ํฉ๋๋ค.
์ปค๋ฐ ๋จ๊ณ๊ฐ ์๋ฃ๋๊ณ DOM์ด ์ ๋ฐ์ดํธ๋ ํ, React๋ `useEffect` ํ ์ด ๋น๋๊ธฐ์ ์ผ๋ก ์คํ๋๋๋ก ์ค์ผ์ค๋งํฉ๋๋ค. ์ด๋ `useEffect` ๋ด๋ถ์ ์ฝ๋(๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฑ)๊ฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ๋ฐ์ดํธ๋ UI๋ฅผ ํ๋ฉด์ ๊ทธ๋ฆฌ๋ ๊ฒ์ ์ฐจ๋จํ์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
์ค์ฉ์ ์ ์ฉ๊ณผ API ์ ์ด
์ด๋ก ์ ์ดํดํ๋ ๊ฒ๋ ์ข์ง๋ง, ๊ธ๋ก๋ฒ ํ์ ๊ฐ๋ฐ์๋ค์ ์ด ๊ฐ๋ ฅํ ์์คํ ์ ์ด๋ป๊ฒ ํ์ฉํ ์ ์์๊น์? React 18์ ๊ฐ๋ฐ์์๊ฒ ๋ ๋๋ง ์ฐ์ ์์๋ฅผ ์ง์ ์ ์ดํ ์ ์๋ ์ฌ๋ฌ API๋ฅผ ๋์ ํ์ต๋๋ค.
์๋ ๋ฐฐ์น(Batching)
React 18์์๋ ๋ชจ๋ ์ํ ์ ๋ฐ์ดํธ๊ฐ ์ด๋์ ๋ฐ์ํ๋ ์๋์ผ๋ก ๋ฐฐ์น๋ฉ๋๋ค. ์ด์ ์๋ React ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด๋ถ์ ์ ๋ฐ์ดํธ๋ง ๋ฐฐ์น๋์์ต๋๋ค. ํ๋ก๋ฏธ์ค, `setTimeout`, ๋๋ ๋ค์ดํฐ๋ธ ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ด๋ถ์ ์ ๋ฐ์ดํธ๋ ๊ฐ๊ฐ ๋ณ๋์ ๋ฆฌ๋ ๋๋ฅผ ์ ๋ฐํ์ต๋๋ค. ์ด์ ์ค์ผ์ค๋ฌ ๋๋ถ์ React๋ ํ "ํฑ(tick)"์ ๊ธฐ๋ค๋ ธ๋ค๊ฐ ๊ทธ ํฑ ๋ด์์ ๋ฐ์ํ๋ ๋ชจ๋ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ๋จ์ผํ๊ณ ์ต์ ํ๋ ๋ฆฌ๋ ๋๋ก ๋ฌถ์ต๋๋ค. ์ด๋ ๋ถํ์ํ ๋ ๋๋ง์ ์ค์ด๊ณ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
`startTransition` API
์ด๊ฒ์ ์๋ง๋ ๋ ๋๋ง ์ฐ์ ์์๋ฅผ ์ ์ดํ๋ ๊ฐ์ฅ ์ค์ํ API์ผ ๊ฒ์ ๋๋ค. `startTransition`์ ์ฌ์ฉํ๋ฉด ํน์ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ๊ธด๊ธํ์ง ์์, ์ฆ "์ ํ(transition)"์ผ๋ก ํ์ํ ์ ์์ต๋๋ค.
๊ฒ์ ์ ๋ ฅ ํ๋๋ฅผ ์์ํด๋ณด์ธ์. ์ฌ์ฉ์๊ฐ ํ์ดํํ ๋ ๋ ๊ฐ์ง ์ผ์ด ์ผ์ด๋์ผ ํฉ๋๋ค: 1. ์ ๋ ฅ ํ๋ ์์ฒด๊ฐ ์๋ก์ด ๋ฌธ์๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด ์ ๋ฐ์ดํธ๋์ด์ผ ํฉ๋๋ค (๋์ ์ฐ์ ์์). 2. ๊ฒ์ ๊ฒฐ๊ณผ ๋ชฉ๋ก์ด ํํฐ๋ง๋๊ณ ๋ค์ ๋ ๋๋ง๋์ด์ผ ํ๋ฉฐ, ์ด๋ ๋๋ฆฐ ์์ ์ผ ์ ์์ต๋๋ค (๋ฎ์ ์ฐ์ ์์).
`startTransition` ์์ด๋ ๋ ์ ๋ฐ์ดํธ๊ฐ ๋์ผํ ์ฐ์ ์์๋ฅผ ๊ฐ์ง๊ฒ ๋์ด, ๋๋ฆฌ๊ฒ ๋ ๋๋ง๋๋ ๋ชฉ๋ก์ด ์ ๋ ฅ ํ๋์ ์ง์ฐ์ ์ ๋ฐํ์ฌ ์ข์ง ์์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ชฉ๋ก ์ ๋ฐ์ดํธ๋ฅผ `startTransition`์ผ๋ก ๊ฐ์ธ๋ฉด React์๊ฒ ์ด๋ ๊ฒ ๋งํ๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค: "์ด ์ ๋ฐ์ดํธ๋ ์ค์ํ์ง ์์. ์๋ก์ด ๋ชฉ๋ก์ ์ค๋นํ๋ ๋์ ์ ์ ์ด์ ๋ชฉ๋ก์ ๊ณ์ ๋ณด์ฌ์ค๋ ๊ด์ฐฎ์. ์ ๋ ฅ ํ๋๋ฅผ ๋ฐ์์ฑ ์๊ฒ ๋ง๋๋ ๊ฒ์ ์ฐ์ ์ํด์ค."
๋ค์์ ์ค์ ์์์ ๋๋ค:
๊ฒ์ ๊ฒฐ๊ณผ๋ฅผ ๋ก๋ํ๋ ์ค...
import { useState, useTransition } from 'react';
function SearchPage() {
const [isPending, startTransition] = useTransition();
const [inputValue, setInputValue] = useState('');
const [searchQuery, setSearchQuery] = useState('');
const handleInputChange = (e) => {
// ๋์ ์ฐ์ ์์ ์
๋ฐ์ดํธ: ์
๋ ฅ ํ๋๋ฅผ ์ฆ์ ์
๋ฐ์ดํธ
setInputValue(e.target.value);
// ๋ฎ์ ์ฐ์ ์์ ์
๋ฐ์ดํธ: ๋๋ฆฐ ์ํ ์
๋ฐ์ดํธ๋ฅผ ํธ๋์ง์
์ผ๋ก ๊ฐ์
startTransition(() => {
setSearchQuery(e.target.value);
});
};
return (
์ด ์ฝ๋์์ `setInputValue`๋ ๋์ ์ฐ์ ์์์ ์ ๋ฐ์ดํธ๋ก, ์ ๋ ฅ์ด ์ ๋ ์ง์ฐ๋์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ ์ฌ์ ์ผ๋ก ๋๋ฆฐ `SearchResults` ์ปดํฌ๋ํธ์ ๋ฆฌ๋ ๋๋ฅผ ์ ๋ฐํ๋ `setSearchQuery`๋ ์ ํ์ผ๋ก ํ์๋ฉ๋๋ค. React๋ ์ฌ์ฉ์๊ฐ ๋ค์ ํ์ดํํ๋ฉด ์ด ์ ํ์ ์ค๋จํ๊ณ , ์ค๋๋ ๋ ๋๋ง ์์ ์ ๋ฒ๋ฆฌ๊ณ ์๋ก์ด ์ฟผ๋ฆฌ๋ก ๋ค์ ์์ํ ์ ์์ต๋๋ค. `useTransition` ํ ์ด ์ ๊ณตํ๋ `isPending` ํ๋๊ทธ๋ ์ด ์ ํ ๋์ ์ฌ์ฉ์์๊ฒ ๋ก๋ฉ ์ํ๋ฅผ ๋ณด์ฌ์ฃผ๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ๋๋ค.
`useDeferredValue` ํ
`useDeferredValue`๋ ๋น์ทํ ๊ฒฐ๊ณผ๋ฅผ ์ป๋ ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ์ฌ์ฉํ๋ฉด ํธ๋ฆฌ์ ์ค์ํ์ง ์์ ๋ถ๋ถ์ ๋ฆฌ๋ ๋๋ง์ ์ง์ฐ์ํฌ ์ ์์ต๋๋ค. ์ด๊ฒ์ ๋๋ฐ์ด์ค(debounce)๋ฅผ ์ ์ฉํ๋ ๊ฒ๊ณผ ๋น์ทํ์ง๋ง, React์ ์ค์ผ์ค๋ฌ์ ์ง์ ํตํฉ๋์ด ์๊ธฐ ๋๋ฌธ์ ํจ์ฌ ๋ ๋๋ํฉ๋๋ค.
์ด ํ ์ ๊ฐ์ ๋ฐ์์ ๋ ๋๋ง ์ค์ ์๋ณธ๋ณด๋ค "๋ค์ฒ์ง๋" ์๋ก์ด ๊ฐ์ ๋ณต์ฌ๋ณธ์ ๋ฐํํฉ๋๋ค. ๋ง์ฝ ํ์ฌ ๋ ๋๋ง์ด ๊ธด๊ธํ ์ ๋ฐ์ดํธ(์ฌ์ฉ์ ์ ๋ ฅ ๋ฑ)์ ์ํด ํธ๋ฆฌ๊ฑฐ๋์๋ค๋ฉด, React๋ ๋จผ์ ์ด์ ์ ์ง์ฐ๋ ๊ฐ์ผ๋ก ๋ ๋๋งํ ๋ค์, ๋ฎ์ ์ฐ์ ์์๋ก ์๋ก์ด ๊ฐ์ผ๋ก ๋ฆฌ๋ ๋๋ฅผ ์ค์ผ์ค๋งํฉ๋๋ค.
`useDeferredValue`๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒ์ ์์ ๋ฅผ ๋ฆฌํฉํ ๋งํด ๋ณด๊ฒ ์ต๋๋ค:
import { useState, useDeferredValue } from 'react';
function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const handleInputChange = (e) => {
setQuery(e.target.value);
};
return (
์ฌ๊ธฐ์ `input`์ ํญ์ ์ต์ `query`๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ `SearchResults`๋ `deferredQuery`๋ฅผ ๋ฐ์ต๋๋ค. ์ฌ์ฉ์๊ฐ ๋น ๋ฅด๊ฒ ํ์ดํํ ๋ `query`๋ ๋ชจ๋ ํค ์ ๋ ฅ์ ๋ํด ์ ๋ฐ์ดํธ๋์ง๋ง, `deferredQuery`๋ React๊ฐ ์ฌ์ ๊ฐ ์๊ธธ ๋๊น์ง ์ด์ ๊ฐ์ ์ ์งํฉ๋๋ค. ์ด๋ ๋ชฉ๋ก์ ๋ ๋๋ง ์ฐ์ ์์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๋ฎ์ถ์ด UI๋ฅผ ์ ๋์ ์ผ๋ก ์ ์งํฉ๋๋ค.
์ฐ์ ์์ ๋ ์ธ ์๊ฐํ: ์ ์ ๋ชจ๋ธ
์ด ์ ์ ๋ชจ๋ธ์ ํ๊ณ ํ ํ๊ธฐ ์ํด ๋ณต์กํ ์๋๋ฆฌ์ค๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์์ ๋ฏธ๋์ด ํผ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ํด๋ณด์ธ์:
- ์ด๊ธฐ ์ํ: ์ฌ์ฉ์๊ฐ ๊ธด ๊ฒ์๋ฌผ ๋ชฉ๋ก์ ์คํฌ๋กคํ๊ณ ์์ต๋๋ค. ์ด๋ ๋ทฐ์ ๋ค์ด์ค๋ ์๋ก์ด ํญ๋ชฉ์ ๋ ๋๋งํ๊ธฐ ์ํด `NormalPriority` ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
- ๋์ ์ฐ์ ์์์ ์ค๋จ: ์คํฌ๋กคํ๋ ๋์, ์ฌ์ฉ์๊ฐ ๊ฒ์๋ฌผ์ ๋๊ธ ์ฐฝ์ ๋๊ธ์ ์ ๋ ฅํ๊ธฐ๋ก ๊ฒฐ์ ํฉ๋๋ค. ์ด ํ์ดํ ๋์์ ์ ๋ ฅ ํ๋์ `ImmediatePriority` ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
- ๋์์ ์ธ ๋ฎ์ ์ฐ์ ์์ ์์ : ๋๊ธ ์ฐฝ์๋ ์์์ด ์ ์ฉ๋ ํ ์คํธ์ ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ์ด ์์ ์ ์์ต๋๋ค. ์ด ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ ๋๋งํ๋ ๊ฒ์ ๋๋ฆด ์ ์์ต๋๋ค. ๋ฏธ๋ฆฌ๋ณด๊ธฐ์ ๋ํ ์ํ ์ ๋ฐ์ดํธ๋ฅผ `startTransition`์ผ๋ก ๊ฐ์ธ `LowPriority` ์ ๋ฐ์ดํธ๋ก ๋ง๋ค ์ ์์ต๋๋ค.
- ๋ฐฑ๊ทธ๋ผ์ด๋ ์ ๋ฐ์ดํธ: ๋์์, ์๋ก์ด ๊ฒ์๋ฌผ์ ์ํ ๋ฐฑ๊ทธ๋ผ์ด๋ `fetch` ํธ์ถ์ด ์๋ฃ๋์ด, ํผ๋ ์๋จ์ "์ ๊ฒ์๋ฌผ ์์" ๋ฐฐ๋๋ฅผ ์ถ๊ฐํ๊ธฐ ์ํ ๋ ๋ค๋ฅธ `NormalPriority` ์ํ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํฉ๋๋ค.
React์ ์ค์ผ์ค๋ฌ๊ฐ ์ด ํธ๋ํฝ์ ์ด๋ป๊ฒ ๊ด๋ฆฌํ๋์ง๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- React๋ ์ฆ์ `NormalPriority`์ ์คํฌ๋กค ๋ ๋๋ง ์์ ์ ์ผ์ ์ค์งํฉ๋๋ค.
- `ImmediatePriority`์ ์ ๋ ฅ ์ ๋ฐ์ดํธ๋ฅผ ์ฆ์ ์ฒ๋ฆฌํฉ๋๋ค. ์ฌ์ฉ์์ ํ์ดํ์ ์์ ํ ๋ฐ์์ ์ผ๋ก ๋๊ปด์ง๋๋ค.
- ๋ฐฑ๊ทธ๋ผ์ด๋์์ `LowPriority`์ ๋๊ธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ ๋๋ง ์์ ์ ์์ํฉ๋๋ค.
- `fetch` ํธ์ถ์ด ๋ฐํ๋์ด ๋ฐฐ๋์ ๋ํ `NormalPriority` ์ ๋ฐ์ดํธ๋ฅผ ์ค์ผ์ค๋งํฉ๋๋ค. ์ด๊ฒ์ ๋๊ธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ณด๋ค ์ฐ์ ์์๊ฐ ๋๊ธฐ ๋๋ฌธ์, React๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ ๋๋ง์ ์ผ์ ์ค์งํ๊ณ , ๋ฐฐ๋ ์ ๋ฐ์ดํธ ์์ ์ ์ํํ์ฌ DOM์ ์ปค๋ฐํ ๋ค์, ์ ํด ์๊ฐ์ด ์๊ธฐ๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ ๋๋ง์ ์ฌ๊ฐํฉ๋๋ค.
- ๋ชจ๋ ์ฌ์ฉ์ ์ํธ์์ฉ๊ณผ ๋ ๋์ ์ฐ์ ์์์ ์์ ์ด ์๋ฃ๋๋ฉด, React๋ ์ค๋จํ๋ ์ง์ ๋ถํฐ ์๋์ `NormalPriority` ์คํฌ๋กค ๋ ๋๋ง ์์ ์ ์ฌ๊ฐํฉ๋๋ค.
์ด๋ฌํ ๋์ ์ธ ์์ ์ ์ผ์ ์ค์ง, ์ฐ์ ์์ ์ง์ , ๊ทธ๋ฆฌ๊ณ ์ฌ๊ฐ๋ ์ฐ์ ์์ ๋ ์ธ ๊ด๋ฆฌ์ ๋ณธ์ง์ ๋๋ค. ์ด๋ ๊ฐ์ฅ ์ค์ํ ์ํธ์์ฉ์ด ๋ ์ค์ํ ๋ฐฑ๊ทธ๋ผ์ด๋ ์์ ์ ์ํด ์ ๋ ์ฐจ๋จ๋์ง ์๋๋ก ๋ณด์ฅํ์ฌ ์ฌ์ฉ์์ ์ฑ๋ฅ ์ธ์์ ํญ์ ์ต์ ํํฉ๋๋ค.
์ ์ธ๊ณ์ ์ํฅ: ๋จ์ํ ์๋๋ฅผ ๋์ด์
React์ ๋์์ฑ ๋ ๋๋ง ๋ชจ๋ธ์ ์ด์ ์ ๋จ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น ๋ฅด๊ฒ ๋๋ผ๊ฒ ํ๋ ๊ฒ์ ๋์ด์ญ๋๋ค. ์ด๋ ์ ์ธ๊ณ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๋ํ ํต์ฌ ๋น์ฆ๋์ค ๋ฐ ์ ํ ์งํ์ ์ค์ง์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
- ์ ๊ทผ์ฑ: ๋ฐ์์ฑ์ด ๋ฐ์ด๋ UI๋ ์ ๊ทผ์ฑ์ด ์ข์ UI์ ๋๋ค. ์ธํฐํ์ด์ค๊ฐ ๋ฉ์ถ๋ฉด ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ํผ๋์ค๋ฝ๊ณ ์ฌ์ฉ ๋ถ๊ฐ๋ฅํ ์ ์์ง๋ง, ํนํ ์คํฌ๋ฆฐ ๋ฆฌ๋์ ๊ฐ์ ๋ณด์กฐ ๊ธฐ์ ์ ์์กดํ๋ ์ฌ์ฉ์์๊ฒ๋ ์ปจํ ์คํธ๋ฅผ ์๊ฑฐ๋ ๋ฐ์์ด ์์ด์ง๋ ๋ฑ ํนํ ๋ฌธ์ ๊ฐ ๋ฉ๋๋ค.
- ์ฌ์ฉ์ ์ ์ง: ๊ฒฝ์์ด ์น์ดํ ๋์งํธ ํ๊ฒฝ์์ ์ฑ๋ฅ์ ํ๋์ ๊ธฐ๋ฅ์ ๋๋ค. ๋๋ฆฌ๊ณ ๋ฒ๋ฒ ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์ ๋ถ๋ง, ๋์ ์ดํ๋ฅ , ๋ฎ์ ์ฐธ์ฌ๋ก ์ด์ด์ง๋๋ค. ์ ๋์ ์ธ ๊ฒฝํ์ ํ๋ ์ํํธ์จ์ด์ ํต์ฌ ๊ธฐ๋์น์ ๋๋ค.
- ๊ฐ๋ฐ์ ๊ฒฝํ: ์ด๋ฌํ ๊ฐ๋ ฅํ ์ค์ผ์ค๋ง ๊ธฐ๋ณธ ์์๋ฅผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ฒด์ ๋ด์ฅํจ์ผ๋ก์จ, React๋ ๊ฐ๋ฐ์๊ฐ ๋ณต์กํ๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ UI๋ฅผ ๋ ์ ์ธ์ ์ผ๋ก ๊ตฌ์ถํ ์ ์๋๋ก ํฉ๋๋ค. ๋ณต์กํ ๋๋ฐ์ด์ฑ, ์ค๋กํ๋ง, ๋๋ `requestIdleCallback` ๋ก์ง์ ์๋์ผ๋ก ๊ตฌํํ๋ ๋์ , ๊ฐ๋ฐ์๋ `startTransition`๊ณผ ๊ฐ์ API๋ฅผ ์ฌ์ฉํ์ฌ React์ ์์ ์ ์๋๋ฅผ ๊ฐ๋จํ ์ ํธ๋ก ๋ณด๋ผ ์ ์์ผ๋ฉฐ, ์ด๋ ๋ ๊นจ๋ํ๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ก ์ด์ด์ง๋๋ค.
๊ธ๋ก๋ฒ ๊ฐ๋ฐํ์ ์ํ ์คํ ๊ฐ๋ฅํ ์กฐ์ธ
- ๋์์ฑ ์์ฉ: ํ์ด React 18์ ์ฌ์ฉํ๊ณ ์๋ก์ด ๋์์ฑ ๊ธฐ๋ฅ์ ์ดํดํ๋๋ก ํ์ธ์. ์ด๋ ํจ๋ฌ๋ค์์ ์ ํ์ ๋๋ค.
- ์ ํ(Transition) ์๋ณ: ์ ํ๋ฆฌ์ผ์ด์ ์์ ๊ธด๊ธํ์ง ์์ UI ์ ๋ฐ์ดํธ๋ฅผ ๊ฐ์ฌํ์ธ์. ํด๋น ์ํ ์ ๋ฐ์ดํธ๋ฅผ `startTransition`์ผ๋ก ๊ฐ์ธ ๋ ์ค์ํ ์ํธ์์ฉ์ ์ฐจ๋จํ์ง ์๋๋ก ํ์ธ์.
- ๋ฌด๊ฑฐ์ด ๋ ๋๋ง ์ง์ฐ: ๋ ๋๋ง์ด ๋๋ฆฌ๊ณ ๋น ๋ฅด๊ฒ ๋ณํ๋ ๋ฐ์ดํฐ์ ์์กดํ๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, `useDeferredValue`๋ฅผ ์ฌ์ฉํ์ฌ ๋ฆฌ๋ ๋๋ง์ ์ฐ์ ์์๋ฅผ ๋ฎ์ถ๊ณ ๋๋จธ์ง ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์์ฑ์ ์ ์งํ์ธ์.
- ํ๋กํ์ผ๋ง ๋ฐ ์ธก์ : React DevTools ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํฌ๋ํธ๊ฐ ์ด๋ป๊ฒ ๋ ๋๋ง๋๋์ง ์๊ฐํํ์ธ์. ํ๋กํ์ผ๋ฌ๋ ๋์์ฑ React์ ๋ง๊ฒ ์ ๋ฐ์ดํธ๋์์ผ๋ฉฐ, ์ด๋ค ์ ๋ฐ์ดํธ๊ฐ ์ค๋จ๋๊ณ ์ด๋ค ๊ฒ์ด ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ผ์ผํค๋์ง ์๋ณํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
- ๊ต์ก ๋ฐ ์ ํ: ํ ๋ด์์ ์ด๋ฌํ ๊ฐ๋ ์ ํ๋ณดํ์ธ์. ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๊ฒ์ ๊ณต๋์ ์ฑ ์์ด๋ฉฐ, React์ ์ค์ผ์ค๋ฌ์ ๋ํ ๊ณต์ ๋ ์ดํด๋ ์ต์ ์ ์ฝ๋๋ฅผ ์์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
๊ฒฐ๋ก
React Fiber์ ๊ทธ ์ฐ์ ์์ ๊ธฐ๋ฐ ์ค์ผ์ค๋ฌ๋ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ์ ์งํ์์ ๊ธฐ๋ ๋น์ ์ธ ๋์ฝ์ ๋ํ๋ ๋๋ค. ์ฐ๋ฆฌ๋ ์ฐจ๋จ ๋ฐฉ์์ ๋๊ธฐ์ ๋ ๋๋ง ์ธ๊ณ์์ ํ๋ ฅ์ ์ด๊ณ ์ค๋จ ๊ฐ๋ฅํ ์ค์ผ์ค๋ง์ด๋ผ๋ ์๋ก์ด ํจ๋ฌ๋ค์์ผ๋ก ์ด๋ํ์ต๋๋ค. ์์ ์ ๊ด๋ฆฌ ๊ฐ๋ฅํ ํ์ด๋ฒ ์ฒญํฌ๋ก ๋๋๊ณ ์ ๊ตํ ๋ ์ธ ๋ชจ๋ธ์ ์ฌ์ฉํ์ฌ ํด๋น ์์ ์ ์ฐ์ ์์๋ฅผ ์ง์ ํจ์ผ๋ก์จ, React๋ ์ฌ์ฉ์ ๋๋ฉด ์ํธ์์ฉ์ด ํญ์ ๋จผ์ ์ฒ๋ฆฌ๋๋๋ก ๋ณด์ฅํ์ฌ, ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ณต์กํ ์์ ์ ์ํํ ๋์กฐ์ฐจ๋ ์ ๋์ ์ด๊ณ ์ฆ๊ฐ์ ์ผ๋ก ๋๊ปด์ง๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์์ต๋๋ค.
๊ฐ๋ฐ์์๊ฒ ์์ด ์ ํ(transitions)์ด๋ ์ง์ฐ๋ ๊ฐ(deferred values)๊ณผ ๊ฐ์ ๊ฐ๋ ์ ๋ง์คํฐํ๋ ๊ฒ์ ๋ ์ด์ ์ ํ์ ์ธ ์ต์ ํ๊ฐ ์๋๋๋คโ์ด๋ ํ๋์ ์ด๊ณ ๊ณ ์ฑ๋ฅ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ํต์ฌ ์ญ๋์ ๋๋ค. React์ ์ฐ์ ์์ ๋ ์ธ ๊ด๋ฆฌ๋ฅผ ์ดํดํ๊ณ ํ์ฉํจ์ผ๋ก์จ, ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ฐ์ํ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ณ , ๋จ์ง ๊ธฐ๋ฅ์ ์ธ ์ธํฐํ์ด์ค๊ฐ ์๋๋ผ ์ง์ ์ผ๋ก ์ฌ์ฉํ๊ธฐ ์ฆ๊ฑฐ์ด ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค.